<template>
  <transition name="fade">
    <div class="my-avatar cropper-fixed" v-if="isShow">
      <div class="cropper-btns">
        <span class="back" @click="back"><x-icon type="ios-arrow-left" size="30"></x-icon></span>
        <h2 class="title">图片裁剪</h2>
        <span @click="uploadImg" class="upload-btn">保存</span>
      </div>
      <vueCropper class="cropper-wrapper" ref="cropper"
      :img="cropper.img"
      :autoCrop="cropper.autoCrop"
      :autoCropWidth="cropper.autoCropWidth"
      :autoCropHeight="cropper.autoCropHeight"
      :fixedBox="cropper.fixedBox"
      :canMoveBox="cropper.canMoveBox"
    ></vueCropper> 
    </div>
  </transition>
</template>

<script>
import VueCropper from 'vue-cropper'  
import http from '@/utils/http'
export default {
  props: {
    cropper: {
      type: Object,
      default: {}
    }
  },
	components: {
    VueCropper
	},
	data () {
		return {
      isShow: false
		}
	},
  methods: {
    back () {
      this.isShow = !this.isShow
    },
    uploadImg () {
      this.$refs.cropper.getCropData((data) => {
        let basefile = { basefile: data }
        http.post('/api/v1/uploadAvatar', basefile, false, res => {
          if (res.status == 1) {
            this.$emit('outImg', res.data)
            this.back()
          }
        });
      })
    }
  }
}
</script>

<style scoped>
.cropper-fixed {
  position: fixed;
  top: 0;
  bottom: 0;
  width: 100%;
  max-width: 640px;
  z-index: 101;
}
.cropper-btns {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  padding: 8px 15px;
  color: #fff;
  display: flex;
  z-index: 10;
}
.cropper-btns svg {
  fill: #fff;
}
.cropper-btns h2.title {
  flex: 2;
  font-size: 16px;
  text-align: center;
}
.back,
.upload-btn {
  flex: 0 0 auto;
  width: 32px;
}
.upload-btn {
  line-height: 36px;
  font-size: 16px;
}
.fade-enter-active {
  transition: all .3s;
  opacity: 1;
}
.fade-leave-active {
  transition: all .3s;
  opacity: 0;
}
.fade-enter,
.fade-leave {
  opacity: 0;
}
</style>
